<template>
	<view class="float-container cu-btn round bg-green shadow" @tap.stop="onClick">
		<view class="content">
			<u-icon class="icon" :class="'cuIcon-'+icon"></u-icon>
			<u-badge v-if="!$tools.emptyValid(unreadCount)" :is-center="true" type="success" :count="unreadCount"
				bgColor="#dd524d" :offset="[-14, -14]"></u-badge>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		name: 'float-button',
		props: {
			icon: {
				type: String,
				default: ''
			},
			unreadCount: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {};
		},
		methods: {
			onClick() {
				console.log('onClick');
				this.$emit('on-click', {});
			}
		}
	};
</script>

<style lang="scss">
	.float-container {
		// background-color: rgba(47, 174, 101, 0.75);
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		z-index: 99;
		right: 60rpx;
		bottom: 120rpx;
		align-items: center;
		display: flex;
		justify-content: center;

		.icon {
			font-size: 64rpx;
			color: #ffffff;
		}

		.content {
			position: relative;
		}
	}
</style>
